<template>
  <basic :field="field">
    <template slot="fieldProps">
      <FormItem label="日期格式">
        <Select transfer v-model="fieldProps.type" @on-change="handleChange">
          <Option
            v-for="option in typeOptions"
            :value="option.value"
            :key="option.value"
          >{{option.label}}</Option>
        </Select>
      </FormItem>
    </template>
  </basic>
</template>

<script>
import basic from './basic.vue';

export default {
  name: 'fieldDate',
  components: {
    basic
  },
  props: {
    field: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      fieldProps: {
        type: 'datetime'
      },
      typeOptions: [
        { value: 'daterange', label: '日期区间(yyyy-MM-dd)' },
        { value: 'datetime', label: '日期（yyyy-MM-dd hh:mm:ss）' },
        { value: 'date', label: '日期（yyyy-MM-dd）' },
        { value: 'month', label: '月 (yyyy-MM)' },
        {
          value: 'datetimerange',
          label: '日期+时间 区间（yyyy-MM-dd hh:mm:ss）'
        },
        { value: 'year', label: '年 (yyyy)' }
      ]
    };
  },
  methods: {
    handleChange() {
      this.$parent.$parent.$emit('on-change-field', {
        props: { type: this.fieldProps.type }
      });
    },
    init() {
      this.fieldProps.type = this.field.props.type || 'datetime';
    }
  },
  watch: {
    field: {
      handler() {
        this.init();
      },
      deep: true
    }
  }
};
</script>
